<template>
	<!-- 我要还款 -->
	<view class="layout">
		<view class="TopButtom">
			<text class="woyaohuankuan">我要还款</text>
			<image class="lanyuan" src="../../../static/user/u2758.png" mode="aspectFill"></image>
			<view class="huanbao">
				<text class="leiji">累计需要还款（元）</text>
				<text class="jine">1,059.33</text>
			</view>
		</view>
		<view class="Center">
			<view class="CenterTop">
				<text class="huankuan">还款金额</text>
				<text class="jilu">还款记录>></text>
			</view>
			<view class="CenterCenter">
				<text class="jinedanwei">¥</text>
				<text class="qian">1,059.33</text>
			</view>
			<view class="CenterButtom">
				<view class="row">
					<label class="radio">
						<radio class="suo" value="r1" checked="true" />
						<text class="quanbuhuankuan">全部还款</text>
					</label>
				</view>
				<view class="item">
					<label class="label">
						<view class="labelBao">
							<radio class="busuo" value="r1"/>
						    <text class="jinqian">¥500</text>
						</view>
						<text class="mingxi">明细>></text>
					</label>
				</view>
				<view class="item">
					<label class="label">
						<view class="labelBao">
							<radio class="busuo" value="r1"/>
						    <text class="jinqian">¥700</text>
						</view>
						<text class="mingxi">明细>></text>
					</label>
				</view>
				<view class="item">
					<label class="label">
						<view class="labelBao">
							<radio class="busuo" value="r1"/>
						    <text class="jinqian">¥500</text>
						</view>
						<text class="mingxi">明细>></text>
					</label>
				</view>
				<view class="item">
					<label class="label">
						<view class="labelBao">
							<radio class="busuo" value="r1"/>
						    <text class="jinqian">¥700</text>
						</view>
						<text class="mingxi">明细>></text>
					</label>
				</view>
				<view class="item">
					<label class="label">
						<view class="labelBao">
							<radio class="busuo" value="r1"/>
						    <text class="jinqian">¥300</text>
						</view>
						<text class="mingxi">明细>></text>
					</label>
				</view>
			</view>
			
		</view>
		
		<!-- <view class="botton">
			<button form-type="reset" >确认还款</button>
		</view> -->
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.layout{
		width: 100vw;
		height: 100vh;
		background: #F6F5F5;
		.TopButtom{
			height: 36vh;
			background: #1976FF;
			display: flex;
			justify-content: flex-end;
			color: #fff;
			position: relative;
			.woyaohuankuan{
				position: absolute;
				top: 18%;
				left: 0;
				right: 0;
				text-align: center;
				font-size: 32rpx;
			}
			.lanyuan{
				width: 60%;
				height: 75%;
				margin-top: 5vh;
				padding-right: 120rpx;
			}
			.huanbao{
				position: absolute;
				top: 38%;
				left: 0;
				right: 0;
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;
				.leiji{
					font-size: 26rpx;
				}
				.jine{
					font-size: 70rpx;
					font-weight: bold;
				}
			}
		}
		.Center{
			position: absolute;
			top: 25vh;
			left: 60rpx;
			right: 40rpx;
			height: 55vh;
			border-radius: 25rpx;
			background: white;
			padding: 20rpx;
			.CenterTop{
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				padding: 15rpx 0;
				.huankuan{
					font-size: 35rpx;
				}
				.jilu{
					font-size: 28rpx;
					color: #447FF9;
				}
			}
			.CenterCenter{
				display: flex;
				align-items: flex-end;
				.jinedanwei{
					font-size: 40rpx;
					padding-right: 30rpx;
				}
				.qian{
					font-size: 75rpx;
					font-weight: bold;
					vertical-align: bottom; 
				}
				
			}
			.CenterButtom{
				.row{
					height: 80rpx;
					display: flex;
					align-items: center;
					background: #E8F0FC;
					border-radius: 18rpx;
					padding: 10rpx;
					margin: 15rpx 0 20rpx;
					.radio{
						display: flex;
						align-items: center;
						.suo{
							transform:scale(0.7);
						}
						.quanbuhuankuan{
							font-size: 30rpx;
							color: #447FF9;
						}
					}
				}
				.item{
					height: 80rpx;
					display: flex;
					align-items: center;
					background: #F3F3F3;
					border-radius: 18rpx;
					padding: 10rpx;
					margin: 15rpx 0 20rpx;
					.label{
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						width: 100%;
						.labelBao{
							display: flex;
							align-items: center;
							.busuo{
								transform:scale(0.7);
							}
							.jinqian{
								font-size: 28rpx;
								font-weight: bold;
							}
						}
						.mingxi{
							font-size: 28rpx;
							color: #447FF9;
						}
					}
				}
			}
		}
	} 
</style>
